import { ProCard } from "@ant-design/pro-components";
import { Space, Table, Tag } from "antd";
import type { ColumnsType } from "antd/es/table";

import React from "react";

interface DataType {
  key: string;
  name: string;
  age: number;
  address: string;
  tags: string[];
}

const Page23: React.FC = () => {
  const columns: ColumnsType<DataType> = [
    {
      title: "姓名",
      dataIndex: "name",
      key: "name",
    },
    {
      title: "年龄",
      dataIndex: "age",
      key: "age",
    },
    {
      title: "地址",
      dataIndex: "address",
      key: "address",
    },
    {
      title: "标签",
      key: "tags",
      dataIndex: "tags",
      render: (tags: string[]) => (
        <>
          {tags.map((tag) => {
            const color = tag.length > 5 ? "geekblue" : "green";
            return (
              <Tag color={color} key={tag}>
                {tag.toUpperCase()}
              </Tag>
            );
          })}
        </>
      ),
    },
    {
      title: "操作",
      key: "action",
      render: () => (
        <Space size="middle">
          <a>编辑</a>
          <a>删除</a>
        </Space>
      ),
    },
  ];

  const data: DataType[] = [
    {
      key: "1",
      name: "张三",
      age: 32,
      address: "北京市朝阳区",
      tags: ["nice", "developer"],
    },
    {
      key: "2",
      name: "李四",
      age: 42,
      address: "上海市浦东新区",
      tags: ["manager"],
    },
  ];

  return (
    <div style={{ padding: 24 }}>
      <h1>表格页面</h1>
      <ProCard>
        <Table columns={columns} dataSource={data} />
      </ProCard>
    </div>
  );
};

export default Page23;
